<template>
  <div class="bg-ff padding-lr20">
    <div :class="['setuptext', id==1?'noImg':'']" style="margin-top: 0.2rem;">
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      ></quill-editor>
      <input
        class="quillImg"
        type="file"
        ref="quillImg"
        @change="update"
        accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PBG"
      />
    </div>
    <div class="margin-t80">
      <div class="sure bg-ff0 text-ff text-center letter-10" @click="sure">保存</div>
    </div>
  </div>
</template>

<script>
const toolbarOptions = [
  "bold",
  "italic",
  "underline",
  { indent: "-1" },
  { align: [] },
  { indent: "+1" },
  { header: 1 },
  { header: 2 },
  { size: ["12px", "14px", "16px", "18px", "20px", "24px", "36px"] },
  // { size: ['small', false, 'large', 'huge'] },
  "image"
];

export default {
  data() {
    return {
      content: ``,
      id: "",
      file: "",
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: () => {
                console.log(1);
              }
            }
          }
        }
      }
    };
  },
  mounted() {
    document.querySelector("html").style.backgroundColor = "#ffffff";
    this.$nextTick(() => {
      let quillImg = document.querySelector(".ql-image");
      let quillImg_l = quillImg.offsetLeft + 5;
      let quillImg_T = quillImg.offsetTop + 3;
      this.$refs.quillImg.style.left = quillImg_l + "px";
      this.$refs.quillImg.style.top = quillImg_T + "px";
    });

    this.$axios
      .post("/home/companyProfile", {
        token: localStorage.getItem("qx_token"),
        type: 1
      })
      .then(res => {
        if (res.data.code == 0) {
          if (res.data.data.enterprise_content != null) {
            this.content = res.data.data.enterprise_content.replace(
              /(<\/?a.*?>)|(<\/?span.*?>)/g,
              ""
            );
          }
          this.id = res.data.data.about_us_type;
        }
      });
  },
  methods: {
    update(e) {
      let inputDOM = e.target.files;
      this.file = inputDOM[0];
      let isJPG =
        this.file.type === "image/jpeg" || this.file.type === "image/png";
      let isLt1M = this.file.size / 1024 / 1024 < 0.1;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG,PNG 格式!");
        return false;
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 100k!");
        return false;
      }
      var formdata = new FormData();
      formdata.append("file", document.querySelector(".quillImg").files[0]);
      formdata.append("type", 5);
      this.$axios.post("/common/upload/image/qiniu", formdata).then(res => {
        this.imgUrl = res.data.url;
        let quill = this.$refs.myQuillEditor.quill;
        const range = quill.getSelection();
        if (range) {
          quill.insertEmbed(range.index, "image", this.imgUrl);
        }
        quill.setSelection(quill.getSelection().index + 1);
        this.$refs.quillImg.value = null;
      });
    },
    sure() {
      if (!this.content) {
        this.$toast("内容不能为空~");
        return false;
      }
      this.$axios
        .post("home/companyProfile", {
          token: localStorage.getItem("qx_token"),
          type: 2,
          profile: this.content
        })
        .then(res => {
          this.$toast(res.data.msg);
          if (res.data.code == 0) {
            this.$router.go(-1);
          }
        });
    },
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange(e) {
      if (e.html.indexOf("&lt;a") >= 0 || e.html.indexOf("<a") >= 0) {
        this.content = this.content.replace(/(<\/?a.*?>)|(<\/?span.*?>)/g, "");
      }
    } // 内容改变事件
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  }
};
</script>


<style>
.setuptext .ql-editor {
  height: 4rem;
  min-height: 4rem;
}
.quillImg {
  width: 18px;
  height: 18px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  background-color: rebeccapurple;
  opacity: 0;
}
.noImg .ql-image {
  display: none !important;
}
</style>